/**
 * Created by chenghao on 2017/10/11.
 */
import React, { PureComponent } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { NavigationActions, withNavigation } from 'react-navigation';
var {height, width} = Dimensions.get('window')

class PageHeader extends PureComponent {
    render() {
        const { navigation, backgroundColor, title } = this.props;
        return (
            <LinearGradient 
                style={{height: 50, padding: 10, flexDirection: 'row'}} 
                colors={['#000000', '#444444', 'rgba(119,136,153, 0.5)', 'rgba(248, 248, 255, 0.2)']}   
                locations={[0, 0.3, 0.6, 0.8]}                    
            >
                <Text style={{color: 'white', flex: 1, backgroundColor: 'transparent'}}>排行榜</Text>
                <View style={{flex: 1, alignItems: 'center'}}>
                    <Text style={{color: 'white', fontSize: 16, fontWeight: 'bold'}}>课程详情</Text>
                </View>
                <View style={{flex: 1}} />
            </LinearGradient>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        height: 50,
        width: width,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: 'transparent',
        zIndex: 99,
    },
    backIcon: {
        width: width * 0.25,
        paddingLeft: 10,
        backgroundColor: 'transparent',
    },
    title: {
        justifyContent: 'center',
        alignItems: 'center',
        width: width * 0.5,
        backgroundColor: 'transparent'
    },
    rightIcon: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        width: width * 0.25,
        paddingRight: 10,
        backgroundColor: 'transparent'
    }
});

export default withNavigation(PageHeader);